<script lang="ts" setup>
import moment from 'moment'
import { Empty } from 'vant'
import { OrderApi } from '~/api/OrderApi'
import type { ContactModel, OrderModel } from '~/model'

const props = defineProps<{
  contact: ContactModel
}>()
const router = useRouter()
const orders = ref([] as OrderModel[])

onMounted(async () => {
  OrderApi.getPaged(1, 10000000, {
    consumer: props.contact.id.toString(),
  }).then((page) => {
    orders.value = page.objects
    orders.value.sort((a, b) => b.batch - a.batch)
    orders.value = orders.value.slice(0, 5)
  })
})

function timeFormatter(order: OrderModel) {
  return moment(order.date).format('MM/DD')
}

function viewOrder(order: OrderModel) {
  router.push(`/orders/detail?id=${order.id}`)
}
</script>

<template>
  <table v-if="orders.length" class="lx-table lx-table-large" style="white-space: pre-wrap;">
    <thead>
      <tr>
        <td>#</td>
        <td>日期</td>
        <td>主要商品</td>
        <td>数量</td>
      </tr>
    </thead>
    <tbody>
      <tr
        v-for="line in orders" :key="line.id"
        @click="viewOrder(line)"
      >
        <td>{{ line.batch }}</td>
        <td>{{ timeFormatter(line) }}</td>
        <td>{{ line.items[0].material?.name }}</td>
        <td>{{ line.items[0].quantity }}</td>
      </tr>
    </tbody>
  </table>
  <Empty v-else description="无订单" />
</template>

<style scoped>

</style>
